<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Loop</title>
</head>
<body>
    <p>Event Loop</p>

    <script>
        console.log('start')
        setTimeout(() => {
            console.log('timeout')
        })
        Promise.resolve().then(() => {
            console.log('promise then')
        })
        console.log('end')

        // ajax(url, fn) // 300ms

        // Event Loop 继续监听...

        // 宏任务 MarcoTask Queue
        // () => {
        //     console.log('timeout')
        // }
        // fn

        // DOM 渲染

        // 微任务 MicroTask Queue
        // () => {
        //     console.log('promise then')
        // }


        // const p = document.createElement('p')
        // p.innerHTML = 'new paragraph'
        // document.body.appendChild(p)
        // const list = document.getElementsByTagName('p')
        // console.log('length----', list.length)

        // console.log('start')
        // // 渲染之后
        // setTimeout(() => {
        //     const list = document.getElementsByTagName('p')
        //     console.log('length on timeout----', list.length) // 2
        //     alert('阻塞 timeout')
        // })
        // // 渲染之前
        // Promise.resolve().then(() => {
        //     const list = document.getElementsByTagName('p')
        //     console.log('length on promise.then----', list.length) // 2
        //     alert('阻塞 promise')
        // })
        // console.log('end')
    </script>
</body>
</html>